<template>
    <div class="SHZY-common-layout">
        <div class="SHZY-common-layout-left">
            <div class="SHZY-common-title">
                <h2>检验员</h2>
            </div>
            <div class="SHZY-common-tree-search-box">
                <el-input placeholder="查找" v-model="filterText" suffix-icon="el-icon-search" clearable />
            </div>
            <el-tree :data="treeData" :props="treeProps" default-expand-all highlight-current ref="treeBox"
                :expand-on-click-node="false" @node-click="handleNodeClick" class="SHZY-common-el-tree" node-key="enCode">
                <span class="custom-tree-node" slot-scope="{node,data}">
                    <i :class="data.icon"></i>
                    <span class="text">{{ node.label }}</span>
                </span>
            </el-tree>
        </div>
        <div class="SHZY-common-layout-center">
            <el-row class="SHZY-common-search-box" :gutter="16">
                <el-form @submit.native.prevent="">
                    <el-col :span="6">
                        <el-form-item label="检验类型">
                            <el-select v-model="query.type" placeholder='请选择' clearable>
                                <el-option v-for="(item, index) in checkTypeOptions" :key="index" :label="item.fullName"
                                    :value="item.enCode"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="物料名称">
                            <el-input v-model="query.material_name" placeholder="物料名称" clearable />
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="6">
                        <el-form-item label="姓名">
                            <el-input v-model="query.employee_fullName" placeholder="姓名" clearable />
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="6">
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
                            <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <div class="SHZY-common-layout-main SHZY-flex-main">
                <div class="SHZY-common-head">
                    <div>
                        <el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()"
                            :disabled="!employeeCode">新增</el-button>
                        <el-button type="text" icon="el-icon-download" @click="exportData()">导出</el-button>
                        <el-button type="text" icon="el-icon-delete" @click="handleBatchRemoveDel()">批量删除</el-button>
                    </div>
                    <div class="SHZY-common-head-right">
                        <el-tooltip effect="dark" content="刷新" placement="top">
                            <el-link icon="icon-ym icon-ym-Refresh SHZY-common-head-icon" :underline="false"
                                @click="reset()" />
                        </el-tooltip>
                    </div>
                </div>

                <SHZY-table v-loading="listLoading" :data="tableList" has-c @selection-change='handleSelectionChange'
                    custom-column>
                    <el-table-column label="检验类型" prop="type" width="150" align="left">
                        <template slot-scope="scope">
                            {{ getType(scope.row.type) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="班组" prop="teamId" width="150" align="left" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="⼯段" prop="workshopSectionId" width="150" align="left" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="⻋间" prop="workshopId" width="150" align="left" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="工位" prop="stationId" width="150" align="left" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="⼯艺路线" prop="artrouteId" width="150" align="left" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="工序" prop="modelingId" width="150" align="left" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="物料名称" prop="materialCode" align="left" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="物料组" prop="materialgroupCode" width="150" align="left" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="员工" prop="employeeCode" width="150" align="left">
                    </el-table-column>
                    <el-table-column label="有效标志" prop="enabledMark" align="left" width="100" sortable='custom'>
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.enabledMark == '正常' ? 'success' : 'danger'" disable-transitions>
                                {{ scope.row.enabledMark }} </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="100">
                        <template slot-scope="scope">
                            <el-button type="text" @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>
                            <el-button type="text" @click="handleDel(scope.row.id)" class='SHZY-table-delBtn'>删除</el-button>
                        </template>
                    </el-table-column>
                </SHZY-table>
                <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
                    @pagination="initData" />
            </div>
            <SHZY-Form v-if="formVisible" ref="SHZYForm" @refresh="refresh" />
            <SHZY-Export-Box v-if="exportBoxVisible" ref="ExportBox" @download="download" />
        </div>
    </div>
</template>
<script>
import restAPI from "@/api/q1/basedata/masterCheckDist"
import Enumerable from 'linq'
import SHZYForm from './form.vue'
import { getQmsbaseipqcinspectorList, batchRemove, removeQmsbaseipqcinspector, exportQmsbaseipqcinspector } from '@/api/q1/processInspection/InspectorAllocation'

export default {
    components: { SHZYForm },
    data() {
        return {
            filterText: '',
            treeData: [],
            inspectorList: [],
            treeProps: {
                children: 'children',
                label: 'fullName',
                value: 'enCode',
            },
            employeeName: '',
            employeeCode: '',
            query: {
                type: '',
                material_name: '',
                employee_fullName: ''
            },
            total: 0,
            listQuery: {
                currentPage: 1,
                pageSize: 20,
                sort: "desc",
                sidx: "",
            },
            checkTypeOptions: [],
            listLoading: false,
            formVisible: false,
            multipleSelection: [],
            tableList: [],
            exportBoxVisible: false,
            columnList: [
                { prop: 'type', label: '检验类型' },
                { prop: 'teamId', label: '班组' },
                { prop: 'workshopSectionId', label: '⼯段' },
                { prop: 'workshopId', label: '⻋间' },
                { prop: 'stationId', label: '工位' },
                { prop: 'artrouteId', label: '⼯艺路线' },
                { prop: 'modelingId', label: '工序' },
                { prop: 'materialCode', label: '物料名称' },
                { prop: 'materialgroupCode', label: '物料组' },
                { prop: 'employeeCode', label: '员工' },
            ]
        }
    },
    created() {
        this.getDictionaryData()
        this.getTreeView()
    },
    methods: {
        getDictionaryData() {
            this.$store.dispatch('base/getDictionaryData', { sort: 'ipqcInspectionType' }).then((res) => {
                this.checkTypeOptions = res
            })
        },
        initData() {
            this.listLoading = true;
            let _query = {
                ...this.listQuery,
                ...this.query,
                menuId: this.menuId,
            };
            let query = {}
            for (let key in _query) {
                if (Array.isArray(_query[key])) {
                    query[key] = _query[key].join()
                }
                else {
                    query[key] = _query[key]
                }
            }
            getQmsbaseipqcinspectorList(query).then(res => {
                this.tableList = res.data.list
                this.total = res.data.total
                this.listLoading = false
            })
        },
        refresh() {
            this.formVisible = false
            this.listQuery = {
                currentPage: 1,
                pageSize: 20,
                sort: "desc",
                sidx: "",
            }
            this.initData()
        },
        download(data) {
            let query = { ...data, ...this.listQuery, ...this.query, menuId: this.menuId }
            exportQmsbaseipqcinspector(query).then(res => {
                if (!res.data.url) return
                this.shzy.downloadFile(res.data.url)
                this.$refs.ExportBox.visible = false
                this.exportBoxVisible = false
            })
        },
        handleDel(id) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                type: 'warning'
            }).then(() => {
                removeQmsbaseipqcinspector(id).then(res => {
                    this.$message({
                        type: 'success',
                        message: res.msg,
                        onClose: () => {
                            this.initData()
                        }
                    });
                })
            }).catch(() => {
            });
        },
        handleBatchRemoveDel() {
            if (!this.multipleSelection.length) {
                this.$message({
                    type: 'error',
                    message: '请选择一条数据',
                    duration: 1500,
                })
                return
            }
            const ids = this.multipleSelection
            this.$confirm('您确定要删除这些数据吗, 是否继续？', '提示', {
                type: 'warning'
            }).then(() => {
                batchRemove(ids).then(res => {
                    this.$message({
                        type: 'success',
                        message: res.msg,
                        onClose: () => {
                            this.$set(this.listQuery, 'currentPage', 1)
                            this.initData()
                        }
                    });
                })
            }).catch(() => { })
        },
        exportData() {
            this.exportBoxVisible = true
            this.$nextTick(() => {
                this.$refs.ExportBox.init(this.columnList)
            })
        },
        addOrUpdateHandle(id) {
            this.formVisible = true
            this.$nextTick(() => {
                this.$refs.SHZYForm.init(this.employeeCode, this.employeeName, id)
            })
        },
        getTreeView() {
            restAPI.getInspectors().then(res => {
                this.treeData = this.inspectorList = res.data;
                this.initData()
            })
        },
        handleSelectionChange(val) {
            const res = val.map(item => item.id)
            this.multipleSelection = res
        },
        search() {
            this.listQuery = {
                currentPage: 1,
                pageSize: 20,
                sort: "desc",
                sidx: "",
            }
            this.initData()
        },
        reset() {
            this.query = this.$options.data().query
            this.listQuery = this.$options.data().listQuery
            this.initData()
        },
        handleNodeClick(data, node) {
            this.employeeName = `${data.departmentName}\\${data.fullName}(${data.enCode})`;
            this.employeeCode = data.enCode;
            for (let key in this.query) {
                this.query[key] = undefined
            }
            this.query.employee_fullName = data.enCode
            this.listQuery = {
                currentPage: 1,
                pageSize: 20,
                sort: "desc",
                sidx: "",
            }
            this.initData()
        },
        menuId() {
            return this.$route.meta.modelId || ''
        },
    },
    computed: {
        getType() {
            return type => {
                for (const item of this.checkTypeOptions) {
                    if (item.enCode == type) {
                        return item.fullName;
                    }
                }
            }
        }
    },
    watch: {
        filterText(val) {
            if (val) {
                this.treeData = Enumerable.from(this.treeData)
                    .where(w => w.fullName.includes(val) || w.enCode.includes(val) || w.departmentName.includes(val)).toArray();
                return;
            }

            this.treeData = this.inspectorList;
        }
    },
}
</script>